import React from 'react'

const PremiumContent: React.FC = () => {
  const plans = [
    {
      id: '1',
      name: 'Premium Monthly',
      price: '$19.99',
      period: 'month',
      features: [
        'Unlimited access to all AI companions',
        'Daily personalized videos',
        'Priority customer support',
        'HD quality streaming',
        'Ad-free experience',
      ],
      isPopular: false,
    },
    {
      id: '2',
      name: 'Premium Yearly',
      price: '$199.99',
      period: 'year',
      features: [
        'Unlimited access to all AI companions',
        'Daily personalized videos',
        'Priority customer support',
        'HD quality streaming',
        'Ad-free experience',
        'Save 16% compared to monthly',
      ],
      isPopular: true,
    },
  ]

  const benefits = [
    {
      icon: 'fas fa-crown',
      title: 'Exclusive Content',
      description: 'Access premium AI companions and exclusive videos',
    },
    {
      icon: 'fas fa-video',
      title: 'Daily Videos',
      description: 'Receive personalized videos from your favorite AI companions',
    },
    {
      icon: 'fas fa-headset',
      title: 'Priority Support',
      description: 'Get 24/7 priority customer support',
    },
    {
      icon: 'fas fa-ad',
      title: 'Ad-Free',
      description: 'Enjoy an uninterrupted, ad-free experience',
    },
  ]

  return (
    <div className="min-h-screen bg-app-dark text-white pb-20">
      {/* App Header */}
      <div className="px-4 pt-2 pb-3 flex items-center">
        <div className="text-xl font-bold">Premium Content</div>
      </div>

      {/* Hero Section */}
      <div className="px-4 py-6">
        <div className="bg-gradient-to-r from-pink-600 to-purple-600 rounded-xl p-6">
          <h2 className="text-2xl font-bold mb-2">Unlock Premium Features</h2>
          <p className="text-gray-200 mb-4">
            Get unlimited access to all AI companions and exclusive content
          </p>
          <div className="flex items-center">
            <div className="bg-white/20 rounded-full px-3 py-1 text-sm mr-2">
              <i className="fas fa-star mr-1"></i> 4.9/5
            </div>
            <div className="text-sm">Rated by 10,000+ users</div>
          </div>
        </div>
      </div>

      {/* Benefits */}
      <div className="px-4 py-4">
        <div className="grid grid-cols-2 gap-4">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="bg-gray-800 rounded-xl p-4 flex flex-col items-center text-center"
            >
              <div className="w-12 h-12 rounded-full bg-pink-600/20 flex items-center justify-center mb-3">
                <i className={`${benefit.icon} text-pink-500 text-xl`}></i>
              </div>
              <h3 className="font-semibold mb-1">{benefit.title}</h3>
              <p className="text-xs text-gray-400">{benefit.description}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Subscription Plans */}
      <div className="px-4 py-4">
        <h3 className="font-bold text-lg mb-4">Choose Your Plan</h3>
        <div className="space-y-4">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={`bg-gray-800 rounded-xl overflow-hidden ${
                plan.isPopular ? 'border-2 border-pink-500' : ''
              }`}
            >
              {plan.isPopular && (
                <div className="bg-pink-500 text-white text-center py-1 text-sm font-bold">
                  MOST POPULAR
                </div>
              )}
              <div className="p-4">
                <div className="flex justify-between items-center mb-4">
                  <div>
                    <h4 className="font-bold">{plan.name}</h4>
                    <div className="text-2xl font-bold mt-1">
                      {plan.price}
                      <span className="text-sm text-gray-400">/{plan.period}</span>
                    </div>
                  </div>
                  <button className="bg-pink-500 text-white rounded-full px-6 py-2 font-bold">
                    Select
                  </button>
                </div>
                <ul className="space-y-2">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-center text-sm">
                      <i className="fas fa-check text-pink-500 mr-2"></i>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* FAQ */}
      <div className="px-4 py-4">
        <h3 className="font-bold text-lg mb-4">Frequently Asked Questions</h3>
        <div className="space-y-4">
          <div className="bg-gray-800 rounded-xl p-4">
            <h4 className="font-semibold mb-2">What's included in the premium subscription?</h4>
            <p className="text-sm text-gray-400">
              Premium subscribers get unlimited access to all AI companions, daily personalized videos,
              priority customer support, HD quality streaming, and an ad-free experience.
            </p>
          </div>
          <div className="bg-gray-800 rounded-xl p-4">
            <h4 className="font-semibold mb-2">Can I cancel my subscription anytime?</h4>
            <p className="text-sm text-gray-400">
              Yes, you can cancel your subscription at any time. Your premium access will continue
              until the end of your current billing period.
            </p>
          </div>
          <div className="bg-gray-800 rounded-xl p-4">
            <h4 className="font-semibold mb-2">How do I manage my subscription?</h4>
            <p className="text-sm text-gray-400">
              You can manage your subscription, including cancellation and payment method updates, in
              your account settings.
            </p>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="px-4 py-6 text-center text-xs text-gray-400">
        <p>By subscribing, you agree to our Terms of Service and Privacy Policy.</p>
        <p className="mt-2">© 2023 FansAI. All rights reserved.</p>
      </div>
    </div>
  )
}

export default PremiumContent 